<template>
  <div class="weui-panel weui-panel_access mycard" @click="godetail(item.id, item.stat)">
    <div class="weui-panel__bd">
      <div class="weui-media-box">
        <div class="weui-media-box_appmsg">
          <div class="weui-media-box__hd">
            <img class="weui-media-box__thumb" :src="item.tx" alt="">
          </div>
          <div class="weui-media-box__bd">
            <p class="weui-media-box__desc">{{item.ty}}<span :class="'van-tag van-tag--round ' + tagClass">{{tagText}}</span></p>
            <h4 class="weui-media-box__title">{{item.addr}}</h4>
          </div>
        </div>
        <div class="weui-media-box_appmsg itemft">
          <div class="weui-media-box__hd"></div>
          <div class="weui-media-box__bd">
            <div class="uinfowrap gray">
              {{item.reporterdept}} · {{item.reportername}}
            </div>
            <time-counter v-if="item.stat === '0' || item.stat === '10' || item.stat === '11'" :timer="tcounter"></time-counter>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TimeCounter from '@/components/timecounter'
export default {
  name: 'IndexItem',
  props: ['item'],
  data () {
    return {
      tagClass: '',
      tagText: '',
      tcounter: 0
    }
  },
  components: {
    TimeCounter
  },
  mounted () {
    this.getStatInfo()
    this.gettcounter()
  },
  methods: {
    godetail (oid, stat) {
      localStorage.ostat = stat
      localStorage.oid = oid
      localStorage.morderdetailfrom = '/mindex'
      this.$router.push('/morderdetail/' + oid)
    },
    getStatInfo () {
      var stat = this.item.stat
      switch (stat) {
        case '0':
        case '10':
          this.tagClass = 'tagred'
          this.tagText = '等待预约'
          break
        case '11':
          this.tagClass = 'taggreen'
          this.tagText = '即将上门'
          break
        case '-1':
          this.tagClass = ''
          this.tagText = '已撤销'
          break
        case '30':
          var rolecode = localStorage.rolecode ? localStorage.rolecode : '0'
          if (rolecode === '4') {
            this.tagClass = 'tagred'
            this.tagText = '等待处理'
          } else {
            this.tagClass = 'tagblue'
            this.tagText = '等待审批'
          }
          break
        case '20':
        case '31':
          this.tagClass = 'tagyellow'
          this.tagText = '正在维修'
          break
        case '50':
          this.tagClass = ''
          this.tagText = '维修完成'
          break
      }
    },
    gettcounter () {
      var stat = this.item.stat
      if (stat === '0' || stat === '10') { // 等待预约
        this.tcounter = this.cm.appointOvertime + Math.round(Date.parse(this.item.reporttime.replace(/-/g, '/')) / 1000)
      } else if (stat === '11') { // 等待上门
        this.tcounter = Math.round(Date.parse(this.item.appointtime.replace(/-/g, '/')) / 1000)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.weui-media-box
  padding-bottom 0
.weui-media-box__desc
  position relative
  height .36rem
  line-height .36rem
.weui-media-box_appmsg
  align-items flex-start

.van-tag
  padding 0 8px
  line-height .32rem
  position absolute
  right 0
  top 0
.tagred
  background-color #fce9e8
  border 1px solid #f0bab6
  color #d44d44
.taggreen
  background-color #f7fae1
  border 1px solid #b8cd82
  color #8aad37
.tagblue
  background-color #e5efff
  border 1px solid #93b2f7
  color #3965cc
.tagyellow
  background-color #fffbdf
  border 1px solid #d5b480
  color #a06e37

.weui-media-box__title
  font-size .48rem
  line-height .76rem
  white-space normal
.itemft
  margin-top .2rem
  .weui-media-box__hd
    height 0
  .weui-media-box__bd
    border-top 1px dashed #e5e5e5!important
    padding .2rem 0
    .uinfowrap
      line-height 1.4em
</style>
